<template>
  <div>
    <div style="margin-bottom: 8px">
      <el-button type="primary" @click="pushNewData"> 新增 </el-button>
      <el-button type="danger" @click="deleteData"> 删除 </el-button>
      <el-button type="primary" @click="save" :loading="state.btnLoading">
        保存
      </el-button>
    </div>
    <el-table
      max-height="450"
      stripe
      border
      size="small"
      :data="state.tableData.data"
      :cell-class-name="tableCellClassName"
      v-loading="state.tableData.loading"
      @cell-click="cellClick"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column label="币种">
        <template #default="scope">
          <div v-if="scope.row.index === state.rowIndex">
            <selectDown
              v-model:modelData="scope.row.currency"
              placeholder="请输入后搜索"
              urlType="currency"
            >
            </selectDown>
          </div>
          <span v-else>
            {{ scope.row.currency }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="收款户名">
        <template #default="scope">
          <div v-if="scope.row.index === state.rowIndex">
            <el-input v-model="scope.row.accountName" size="small"> </el-input>
          </div>
          <span v-else>
            {{ scope.row.accountName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="银行账号">
        <template #default="scope">
          <div v-if="scope.row.index === state.rowIndex">
            <el-input v-model="scope.row.bankAccount" size="small"> </el-input>
          </div>
          <span v-else>
            {{ scope.row.bankAccount }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="开户银行">
        <template #default="scope">
          <div v-if="scope.row.index === state.rowIndex">
            <el-input v-model="scope.row.bankName" size="small"> </el-input>
          </div>
          <span v-else>
            {{ scope.row.bankName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template #default="scope">
          <div v-if="scope.row.index === state.rowIndex">
            <el-input v-model="scope.row.memo" size="small"> </el-input>
          </div>
          <span v-else>
            {{ scope.row.memo }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  onMounted,
  defineProps,
  defineEmits,
  computed,
} from "vue";
import selectDown from "./selectDown.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import request from "@/public/request";
import { useRoute, useRouter } from "vue-router";

const Route = useRoute();
const Router = useRouter();

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:show"]);

const inShow = computed({
  get() {
    return this.show;
  },
  set(value) {
    this.$emit("update:show", value);
  },
});
const state = reactive({
  rowIndex: -1, //行索引
  columnIndex: -1, //列索引

  btnLoading: false,
  tableData: {
    data: [],
    loading: false,
  },
  copyData: [],

  selectData: [],
});

const handleClose = (done) => {
  done();
};
const tableCellClassName = ({ row, column, rowIndex, columnIndex }) => {
  column.index = columnIndex;
  row.index = rowIndex;
};
const cellClick = (row, column, cell, event) => {
  state.rowIndex = row.index;
  state.columnIndex = column.index;
};
const handleSelectionChange = (selection) => {
  state.selectData = selection;
};
const initData = () => {
  if(!Route.query.entId){
    return;
  }
  state.tableData.loading = true;
  request.get("/api/buenterprisebank/query", {
      EntId: Route.query.entId,
    })
    .then((res) => {
      state.tableData.data = res;
      state.copyData = res;
    })
    .finally(() => (state.tableData.loading = false));
};
const pushNewData = () => {
  state.tableData.data.push({
    entId: Route.query.entId,
    currency: "",
    accountName: "",
    bankAccount: "",
    bankName: "",
    memo: "",
  });
};
const deleteData = () => {
  let newArray = [];
  state.tableData.data.forEach((t) => {
    if (!state.selectData.find((item) => t == item)) {
      newArray.push(t);
    }
  });
  state.tableData.data = newArray;
};
const validData = () => {
  for (let i of state.tableData.data) {
    for (let j of Object.keys(i)) {
      if (
        j == "currency" ||
        j == "accountName" ||
        j == "bankAccount" ||
        j == "bankName" ||
        j == "entId"
      ) {
        if (!i[j]) {
          return false;
        }
      } else {
        continue;
      }
    }
  }
  return true;
};
const save = () => {
  if (state.tableData.data.length == 0) {
    ElMessage.warning("表格中没有数据");
    return;
  }
  if (validData()) {
    let newFormData = JSON.parse(JSON.stringify(state.tableData.data));
    newFormData.forEach((t) => {
      delete t.index;
    });
    // 判断列表数据是否存在币种，收款户名，银行账号，开户账户是否有完全相同的数据
    let hasSameObj = false;
    for (let i = 0; i < newFormData.length; i++) {
      hasSameObj = false;
      let checkObj = newFormData[i];
      for (let j = i + 1; j < newFormData.length; j++) {
        let sigleObj = newFormData[j];
        if (
          checkObj.currency == sigleObj.currency &&
          checkObj.accountName == sigleObj.accountName &&
          checkObj.bankAccount == sigleObj.bankAccount &&
          checkObj.bankName == sigleObj.bankName
        ) {
          hasSameObj = true;
          break;
        }
      }
      if (hasSameObj) {
        break;
      }
    }
    if (hasSameObj) {
      ElMessage.warning("列表数据存在两条相同的数据");
      return;
    }
    this.btnLoading = true;
    request
      .post("/api/buenterprisebank/save", {
        entId: Route.query.entId,
        bankList: newFormData
      })
      .then((res) => {
        if (res.status) {
          ElMessage.success(res.message);
        } else {
          ElMessage.error(res.message);
        }
      })
      .finally(() => (state.btnLoading = false));
  } else {
    ElMessage.warning("数据中存在币种、收款户名、银行账号、开户账号为空");
  }
};
onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped></style>
